import React from 'react';
import { RefreshControl,View, Text, TouchableOpacity, ScrollView,FlatList,Image,Alert} from 'react-native';
import moment from 'moment'
import navigationhelper from 'src/components/navigationhelper'
import {CalendarList, LocaleConfig} from 'react-native-calendars';
import NavBar from 'src/components/navBar'
import Layer from 'src/components/Layer'
import {isIPhoneX,deviceWidth} from 'src/util'
import ScrollableTabView from 'react-native-scrollable-tab-view'
import { deviceHeight } from '../../../../util';
import  RepayMentRecordCell from './repayMentRecordCell'
import  CardManager from '../../../../service/CardManager/index'
import {inject, observer} from "mobx-react/native"
import CardManagerCell from './cardManagerCell'
import ActionSheet from 'react-native-actionsheet'
import {Modal} from '@ant-design/react-native';


@inject('userAuth')

@observer

export default class creditCardList extends React.Component {


     

    constructor(props) {
      super(props);
      this.state={
        dataArry:[],
        dict:{},
        refreshing:false
      }
    }
    componentDidMount(){
      Layer.hiddenLoading()
      this.getDataList()
    }
    SeparatorView(){
        return(<View style={{height:10,width:deviceWidth, backgroundColor:'#E6E3E6'}}/>)
    }

    addCard=(typeCard)=>{
    return(
      <TouchableOpacity
      activeOpacity ={0.8}
      onPress={()=>{
        {typeCard == 1?navigationhelper.navigate('AddCardView'):navigationhelper.navigate('ChangeSaveCard',{callback:()=>{this.getDataList()}})}
      }}>

     <View style={{paddingVertical:10,marginTop:10,backgroundColor:'#fff',flexDirection:'row',justifyContent:'space-between'}}>
     <View style={{flexDirection:'row',justifyContent:'center',alignItems:'center'}}>
     {typeCard == 1?<Image style={{width:25,height:25,marginLeft:20}} source={require('src/assets/cardManager/tianjiaxinyongka.png')}>
     </Image>:<Image style={{width:25,height:25,marginLeft:20}} source={require('src/assets/refresh.png')}>
     </Image>}
     <Text style={{marginLeft:10,color:'#2E2E2E',fontSize:16}}>{typeCard == 2?'更换储蓄卡':'添加信用卡'}</Text>
    </View>
    <Image style={{marginRight:20,width:25,height:25}} source={require('src/assets/icon_arrow_grey.png')}>
     </Image>
    </View>
    </TouchableOpacity>
   )
    }

    alertItemCard=(item)=>{
      this.ActionSheet.show()
      this.setState({
        dict:item
      })
    }

    fetchDeletebankCard =(id)=>{
      CardManager.deleteBankCard({
        token: this.props.userAuth.token,
      },id).then((res)=>{
        Layer.hiddenLoading()
        if(res.status == 'success'){
         Layer.showMsg('删除成功')
          this.getDataList()
        }
      }).catch((res)=>{
        Layer.hiddenLoading()
      }) 
    }

    getDataList=()=>{
      Layer.showLoading()
      CardManager.bankCardList({
        token: this.props.userAuth.token,
        type:this.props.type,
      }).then((res)=>{
        this.setState({
          refreshing:false
        })
        console.log('res==>',res)
        Layer.hiddenLoading()
        if(res.status == 'success'){
         this.setState({
           dataArry:res.data.list
         })
        }
      }).catch((res)=>{
        this.setState({
          refreshing:false
        })
        Layer.hiddenLoading()
      }) 
    }

    _renderRefresh = () => {
      this.setState({
        refreshing:true
      })
      this.getDataList();
    }

    // ListEmptyComponent=()=> {
    //     return(
    //       <View style={{ height: deviceHeight *0.5,alignItems: 'center', justifyContent: 'center' }}>
    //       <Text style={{fontSize:25,color:'#8E8E93',fontWeight:'bold'}}>暂无数据</Text>
    //      </View>
    //     )
    // }
    render(){
      const {typeCard} = this.props
        return(
        <View style={{flex:1}}>
        <FlatList
        refreshing={this.state.refreshing}
        onRefresh={()=>{this._renderRefresh}}
        style={{marginTop:10}}
        // ListEmptyComponent={this.ListEmptyComponent}
        data={this.state.dataArry}
        keyExtractor={(item, index) =>index}
        ItemSeparatorComponent={this.SeparatorView}
         ListFooterComponent={this.addCard(typeCard)}//尾巴
        onEndReachedThreshold={0.1}
        renderItem={({item}) =>
        {
          return(
              <CardManagerCell itemData={item} typeCard={typeCard} deleteCard={(data)=>{
                this.alertItemCard(item)
             }} />
           )
         }
        }/>

        <ActionSheet
                    ref={o => this.ActionSheet = o}
                    options={['删除卡片', '编辑卡片', '取消']}
                    cancelButtonIndex={2}
                    onPress={(index) => {
                   
                        if(index === 0) {
                          Alert.alert(
                            '确认删除?',
                            '',
                            [
                              {text: '取消', onPress: () => console.log('取消')},
                              {text: '确定', onPress: () => this.fetchDeletebankCard(this.state.dict.id)},
                            ],
                          )
                        }else if(index == 1) {
                          navigationhelper.navigate('ChangeCreditCard',{dict:this.state.dict,callback:()=>{this.getDataList()}})
                        }
                    }}
                />
        </View>


        )
    }
 }